var gameAreaWidth = "";
var gameAreaHeight = "";
var gameArea = "";
var myAirplane = "";
var shadow = "";


function gameBtn(){
    var btn = document.querySelector(".gameBtn");
    btn.style.display ="none";//点击游戏开始后开始按钮隐藏
    shadow = document.querySelector(".shadow");
    shadow.style.display = "none";//点击游戏开始后阴影部分隐藏
    myAirObj.createMyAircraft();
    game.gameStart();//调用开始游戏
}



window.onload=function(){
    gameArea = document.querySelector(".gameArea");
    // myAirplane = document.querySelector(".myAir");
    gameAreaWidth = gameArea.offsetWidth;//游戏区域的宽度
    gameAreaHeight = gameArea.offsetHeight;//游戏区域的高
    // console.log(gameAreaWidth,gameAreaHeight)
    gameArea.onmousemove=function(e){
        if(game.status){
             posX = e.offsetX;
            posY = e.offsetY
           // console.log(posX,posY);
            myAirObj.fly(posX,posY);//调用我方飞机飞行的方法
        }
       
    }
    gameArea.onmousedown=function(e){
          if(game.status){
              myAirObj.sendBullet(e.offsetX,e.offsetY);//调用发射子弹的方法
          }
      }
}



var game={
    score:0,
    time:0,
    status:false,// 状态
    bulletArray:[], //子弹数组
    enemyAircraftArray:[],//敌机数组
    bulletFlyTime:0,//子弹飞行时间
    enemyAircraftFlyTime:0,//敌机飞行时间
    createEnemyAircraftTime:0,//创建敌机的时间
    getTimeColck:0,//获取时间的时长时钟
    flyBulletAndEnemyAircraft:function(){
        this.bulletFlyTime = setInterval(function(){  //子弹 每 30ms移动 一次
            if(game.status){
                for(var i=0;i<game.bulletArray.length;i++){
                    game.bulletArray[i].fly();//调用子弹飞行方法
                } 
                game.isBomb();//调用是否产生爆炸方法
                //
            }
        },30);
        this.enemyAircraftFlyTime = setInterval(function(){
            if(game.status){
                for(var i=0;i<game.enemyAircraftArray.length;i++){
                    game.enemyAircraftArray[i].fly();//调用敌机飞行的方法
                }
            }
        },10);//敌机10ms移动一次
         
    },
    createEnemyAircraft: function(){//创建敌机
        this.createEnemyAircraftTime = setInterval(function(){
                game.enemyAircraftArray.push(new EnemyAircraft());//实例化一个敌方飞机
            },800); //每800ms随机创建一架敌机
    },
    isBomb:function(){//产生爆炸
        for(let i = game.bulletArray.length - 1;i >= 0;i--){//遍历  ,每个子弹都判断一下是否碰撞
            if(game.status){
               var pos =  game.bulletArray[i].isHit(); //调用子弹数组中子弹是否碰撞
               //获取pos下标值
               if(pos != -1){
                   //子弹消失
                    game.bulletArray[i].dispper();
                   //敌机消失,并且产生爆炸效果
                    game.enemyAircraftArray[pos].hit();
               }
            }
        }
    },
    getScore:function(thisScore){
       this.score += thisScore;
       var scoreNum = document.querySelector(".scoreNum");
    //  var scoreNum = document.getElementsByClassName("scoreNum")[0]; //可以选择这种方式获取分数,或者上面一种
       scoreNum.innerHTML = this.score;

       if(this.score > 500){
           scoreNum.innerHTML = parseInt(0);
           this.score = 0;
       }
       if(this.score < 0){
        scoreNum.innerHTML = 0;
        //游戏结束
        game.gameOver();
       }
    },
    getTime:function(){
        var timeNum = document.querySelector(".timeNum");
        // var timeNum = document.getElementsByClassName("timeNum")[0];
        timeNum.innerHTML = 0;
         this.getTimeColck = setInterval(function(){
                timeNum.innerHTML =(++game.time);
            },1000);
    },
    gameStart:function(){//游戏开始
        this.score=0;
        this.time=0;
        this.status = true;

       //随机创建敌机
        this.createEnemyAircraft();
       //时间跑起来
        this.getTime();
       //爆炸
        //子弹 ,敌方飞机飞行
        this.flyBulletAndEnemyAircraft();
    },
    gameOver:function(){//游戏结束
        this.status=false;
        //分数清零
        //时间清除
        var timeNum = document.querySelector(".timeNum");
        timeNum.innerHTML = 0;
        clearInterval(this.bulletFlyTime);
        clearInterval(this.enemyAircraftFlyTime);
        clearInterval(this.createEnemyAircraftTime);
        clearInterval(this.getTimeColck);

        //子弹(数据)清除
        this.bulletArray = [];
        //子弹(对象)清除

        var bullet = document.getElementsByClassName("bullet");
        for(let i=0,len=bullet.length;i < len;i++){
            gameArea.removeChild(bullet[0]);
        }
       
        //敌机(数据)清除

        this.enemyAircraftArray = [];
        //敌方飞机(对象)清除
        var enemyAircraft = document.getElementsByClassName("enemyAircraft");
        for(let i=0,len=enemyAircraft.length;i<len;i++){
            gameArea.removeChild(enemyAircraft[0]);
        }
        //我方飞机清除
        gameArea.removeChild(myAirplane);
        //段位结算
        var rank = document.querySelector(".rank");
        if(this.time <= 30){
            rank.innerHTML = "倔强青铜";
        }else if(this.time <= 60){
            rank.innerHTML = "秩序白银";
        }else if(this.time <= 120){
            rank.innerHTML = "荣耀黄金";
        }else if(this.time <= 240){
            rank.innerHTML = "永恒钻石";
        }else{
            rank.innerHTML = "最强王者";
        }
        //时间结算
        var flyTimeNum = document.querySelector(".flyTimeNum");
        flyTimeNum.innerHTML = this.time;
        //阴影显示
        shadow.style.display = "flex";
        //开始按钮隐藏
        var gameBtn = document.querySelector(".gameBtn");
        gameBtn.style.display = "none";
        //结束框出来
        var mycanvas = document.querySelector(".mycanvas");
        mycanvas.style.display = "flex";


    }
}

//我的飞机对象
var myAirObj={
    id: 0,
    left:0,
    top:0,
    fly:function(X,Y){
        if(X>53 && X <gameAreaWidth -53 ){
             myAirplane.style.left = X - 53 +"px";
        }
        if(Y>38 && Y<gameAreaHeight - 38){
             myAirplane.style.top = Y - 38 + "px";
        }
    },
    sendBullet:function(X,Y){ //发射子弹的方法
        if(X > 0 && X < parseInt(myAirplane.offsetWidth / 2)){
            this.left = parseInt(myAirplane.offsetWidth / 2) ;
        }else if(X > parseInt(gameAreaWidth) - (myAirplane.offsetWidth / 2) && X < parseInt(gameAreaWidth)){
            this.left = parseInt(gameAreaWidth) - (myAirplane.offsetWidth / 2);
        }else{
            this.left = X;
        }
          
          this.top =  Y - parseInt(myAirplane.offsetHeight);
          //var thisBullet = new Bullet(this.left,this.top);
            game.bulletArray.push(new Bullet(this.left,this.top));//向数组中追加新创建的子弹
    },
    createMyAircraft:function(){//创建敌机可以不用节省时间,不过需要会创建飞机
            myAirplane = document.createElement("div");
            myAirplane.id = "myAir";
            myAirplane.className = "myAir";
            gameArea.appendChild(myAirplane);
    }

}


//创建一个子弹
var bulletId = 0; //给每个子弹编号
function Bullet(X,Y){
    this.id = "bullet" + (++bulletId) % 10000;//对每个子弹进行编号
    this.left = X;
    this.top = Y;
    var thisBullet = document.createElement("div"); //创建一个新元素
    thisBullet.id = this.id;
    thisBullet.className = "bullet";
    thisBullet.style.left = this.left + "px";
    thisBullet.style.top = this.top + "px";
    gameArea.appendChild(thisBullet); //在游戏区里添加子元素 即添加一个子弹
}

//子弹原型的飞行
Bullet.prototype.fly=function(){
        this.top -=5; //子弹每30ms移动一次 ,子弹纵坐标自减5px(像素)
        var thisBullet = document.getElementById(this.id);//获取当前的子弹id

         if(this.top >= 0){//子弹消失
              thisBullet.style.top = this.top + "px";
         }else{//从数组中移除子弹
            //  for(var i=0;i<game.bulletArray.length;i++){
            //      if(game.bulletArray[i] == this){
            //          game.bulletArray.splice(i,1);//从数组里删除   从第i个开始删除一个
            //      } 
            //  } 
            // gameArea.removeChild(thisBullet);//从界面移除子弹
            this.dispper();
         }
    }

//在子弹原型中添加isHit() 是否碰撞的方法
Bullet.prototype.isHit = function(){
    //一个子弹对所有数组中的飞机的距离进行判断
        for(let i = game.enemyAircraftArray.length - 1;i >= 0;i--){
            //敌机的宽度
            var enemyAircraftWidth = document.getElementById(game.enemyAircraftArray[i].id).clientWidth;
            var enemyAircraftHeight = document.getElementById(game.enemyAircraftArray[i].id).clientHeight;
            //这里this.top只当前子弹的纵坐标();
            if(Math.abs(this.top - game.enemyAircraftArray[i].top) < enemyAircraftHeight && Math.abs(this.left - game.enemyAircraftArray[i].left) <enemyAircraftWidth){
                return i;//返回i
            }
        }
        return -1;//返回-1
}
//子弹消失的原型方法
Bullet.prototype.dispper = function(){
    var thisBullet = document.getElementById(this.id);//获取子弹id
    for(var i=0;i<game.bulletArray.length;i++){
        if(game.bulletArray[i] == this){
            game.bulletArray.splice(i,1);//从数组里删除   从第i个开始删除一个
        } 
    } 
   gameArea.removeChild(thisBullet);//从界面移除子弹
}
    //创建一个敌机
    var enemyAircraftId = 0;//敌机id
    function EnemyAircraft(){
        this.id = "enemyAircraft" + (++enemyAircraftId) % 10000; //给每架飞机编号
        var color = "";
        this.top = 0;
        this.score = 0;
        //(49,gameAreaWidth - 49)*Math.random()
        //(5,34) (0,1)*29 ---(0,29)+5 ----(5,34)
        this.left = Math.random()* (parseInt(gameAreaWidth) - 98);//产生随机数,用来确定敌机出现的位置
        switch(parseInt(Math.random()*3)){//随即产生0~2中的一个整数
            case 0:
                color = "e1";//切换敌机生成的颜色
                this.score = 10;
                break;
            case 1: 
                color = "e2";
                this.score = 20;
                break;
            case 2:
                color = "e3";
                this.score = 30;
                break;
        }
        var thisEnemyAircraft = document.createElement("div");//创建div元素
        thisEnemyAircraft.id = this.id;//向敌机(该div元素)中添加id
        thisEnemyAircraft.className = "enemyAircraft"; //向敌机(该div元素)中添加class属性名
        thisEnemyAircraft.classList.add(color);  //   向敌机(该div元素)中添加classList属性
        thisEnemyAircraft.style.left = this.left + "px";//修改敌机移动的位置
        thisEnemyAircraft.style.top = this.top + "px";
        gameArea.appendChild(thisEnemyAircraft);//向游戏区域追加当前创建的飞机(追加子节点);

    }

//敌机原型的飞行
EnemyAircraft.prototype.fly=function(){
    this.top +=1; //子弹每10ms移动一次 ,飞机纵坐标自加1px(像素)
    var thisenemyAircraft = document.getElementById(this.id);//获取当前的子弹id
     if(this.top <= parseInt(gameAreaHeight)){
        thisenemyAircraft.style.top = this.top + "px";
     }else{//从数组中移除飞机
         for(var i=0;i<game.enemyAircraftArray.length;i++){
             if(game.enemyAircraftArray[i] == this){
                 game.enemyAircraftArray.splice(i,1);//从数组里删除   从第i个开始删除一个
             } 
         } 
        gameArea.removeChild(thisenemyAircraft);//从界面移除子弹
        game.getScore(this.score*(-5));
     }
}
//飞机爆炸移除(隐藏)
EnemyAircraft.prototype.hit=function(){
        var thisEnemyAircraft = document.getElementById(this.id);//获取敌机当前飞机
        thisEnemyAircraft.style.background="url(./images/boom.gif)";//将当前击中的敌机替换成爆炸效果图
        thisEnemyAircraft.style.backgroundSize = "cover";//将爆炸效果覆盖
        //倒计时设置
        setTimeout(function(){
            gameArea.removeChild(thisEnemyAircraft);//从游戏区域移除当前的效果
        },500);//击中后,倒计时1s,从游戏区域移除,即爆炸效果消失.
        for(var i=0;i<game.enemyAircraftArray.length;i++){
            if(game.enemyAircraftArray[i] == this){
                game.enemyAircraftArray.splice(i,1);//从敌机数组中移除击中的该敌机
            }
        }
        game.getScore(this.score);

}


function reGameBtn(){

      gameBtn();

}
































